<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        /*float: left;*/
        text-align: right;
        width: 100%;
        /*height: auto !important;*/
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        white-space: nowrap;
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .department >>> .layui-table-cell {
        padding: 0 0 !important;
    }
    .department >>> .layui-table-box {
        overflow-y: auto;
    }
</style>

<template>
    <div class="department" style="overflow-x: auto;">
                <div  class="layui-col-lg4 select-item">
                    <button style="float: left;" class="layui-btn layui-btn-sm" @click="doPay(1)">存草稿</button>
                    <button style="float: left;" class="layui-btn layui-btn-sm" @click="toPay(2)">支付申请</button>
                    <button style="float: left;" class="layui-btn layui-btn-sm" @click="$parent.back">返回</button>
                </div>

<!--        <table class="layui-table layui-form" id="wlorders" lay-filter="wlorders"></table>-->
<!--        <table class="layui-table layui-form" v-if="wlSeaOrders.length > 0" style="height:200px">-->

<!--            <thead>-->
<!--            <tr>-->
<!--                <th>海运单号</th>-->
<!--                <th>部门</th>-->
<!--                <th>发货港口</th>-->
<!--                <th>收货港口</th>-->
<!--                <th>收货港所属国家</th>-->
<!--                <th>物流公司</th>-->
<!--                <th>航次</th>-->
<!--                <th>开船日期</th>-->
<!--                <th>到货日期</th>-->
<!--                <th>状态</th>-->
<!--                <th>陆运公司</th>-->
<!--                <th>陆运单号</th>-->
<!--                <th>发货时间</th>-->
<!--                <th>发货地址</th>-->
<!--                <th>收货地址</th>-->
<!--                <th>类型</th>-->
<!--                <th>计价方式</th>-->
<!--                <th>业务单号</th>-->
<!--                <th>重量(吨)</th>-->
<!--                <th>单价</th>-->
<!--                <th>其他费用</th>-->
<!--                <th>扣减费用</th>-->
<!--                <th>结算金额</th>-->
<!--                <th>车牌号</th>-->
<!--                <th>承运人</th>-->
<!--                <th>状态</th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            <template v-for="(item) in wlSeaOrders" >-->
<!--                <tr v-for="(row, i) in item.wlitems" >-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.code}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.departname}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.deliPort}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.arriPort}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.arriPortCountry}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.customeridSea}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.shipCode}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.loadtime}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.unloadtime}}</td>-->
<!--                    <td v-if="i === 0" :rowspan="item.wlitems.length">{{item.statusname}}</td>-->
<!--                    <td>{{row.customername}}</td>-->
<!--                    <td>{{row.code}}</td>-->
<!--                    <td>{{row.loadtime}}</td>-->
<!--                    <td>{{row.deliprovince + row.delicity + row.delidistrict + row.deliaddress}}</td>-->
<!--                    <td>{{row.arriprovince + row.arricity + row.arridistrict + row.arriaddres}}</td>-->
<!--                    <td>{{row.typename}}</td>-->
<!--                    <td>{{row.farepricetypename}}</td>-->
<!--                    <td>{{getLinkcode(row.items)}}</td>-->
<!--                    <td>{{row.fareweight}}</td>-->
<!--                    <td>{{row.fareprice}}</td>-->
<!--                    <td>{{row.othercost}}</td>-->
<!--                    <td>{{row.deductamount}}</td>-->
<!--                    <td>{{row.amount}}</td>-->
<!--                    <td>{{row.carcode}}</td>-->
<!--                    <td>{{row.drivername}}</td>-->
<!--                    <td>{{row.statusname}}</td>-->
<!--                </tr>-->
<!--            </template>-->
<!--            </tbody>-->
<!--        </table>-->
        <table class="layui-table layui-form" style="height:200px">

            <thead>
            <tr>
                <th>公司</th>
                <th>物流单号</th>
                <th>发货时间</th>
                <th>发货地址</th>
                <th>收货地址</th>
                <th>类型</th>
                <th>计价方式</th>
                <th>业务单号</th>
                <th>重量(吨)</th>
                <th>单价</th>
                <th>其他费用</th>
                <th>扣减费用</th>
                <th>结算金额</th>
                <th>车牌号</th>
                <th>承运人</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item) in wlorders" >
                <tr>
                    <td>{{item.customername}}</td>
                    <td>{{item.code}}</td>
                    <td>{{item.loadtime}}</td>
                    <td>{{item.deliprovince + item.delicity + item.delidistrict + item.deliaddress}}</td>
                    <td>{{item.arriprovince + item.arricity + item.arridistrict + item.arriaddres}}</td>
                    <td>{{item.typename}}</td>
                    <td>{{item.farepricetypename}}</td>
                    <td>{{getLinkcode(item.items)}}</td>
                    <td>{{item.fareweight}}</td>
                    <td>{{item.fareprice}}</td>
                    <td>{{item.othercost}}</td>
                    <td>{{item.deductamount}}</td>
                    <td>{{item.amount}}</td>
                    <td>{{item.carcode}}</td>
                    <td>{{item.drivername}}</td>
                    <td>{{item.statusname}}</td>
                </tr>
            </template>
            </tbody>
        </table>

        <div class="totalbox">
            <div class="total">合计：
                <span><i style="color: red;">{{total}}</i> 单</span>
                <span style="margin-left: 5px;"><i style="color: red;">{{totalAmount}}</i> 元</span>
            </div>
        </div>
<!--        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>-->
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    let qs = require('qs');

    var table1;
    export default {
        name: 'WlPayExpensesApply',
        components: {Pagination},
        data () {
            return {
                totalAmount: 0,
                total: '',
                wlorders: [],
                wlSeaOrders: [],
                wlLandOrders: []
            }
        },
        mounted() {
            //分别封装海运订单和陆运订单
            this.wlorders = this.$store.state.wlorders;
            this.wlLandOrders = this.wlorders.filter(item => {
                return item.transtype == 1;
            });
            this.wlSeaOrders = this.wlorders.filter(item => {
                return item.transtype == 2;
            });

            this.getFinalData();

            let that = this;

            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                    form.render();
            });

        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            getLinkcode: function(items) {
                let linkcodes = '';
                for (let i=0; i<items.length; i++) {
                    linkcodes += items[i].linkcode + ', ';
                }
                return linkcodes != '' ? linkcodes.substr(0, linkcodes.length - 2) : '';
            },
            getFinalData: function(){
                let postData = {};
                let amount = 0;
                for (let i=0; i<this.wlorders.length; i++) {
                    amount += this.wlorders[i].amount;
                    postData['entity.customerid'] = this.wlorders[0].customerid;
                    postData['entity.customername'] = this.wlorders[0].customername;
                    postData['items[' + i + '].wlinfoid'] = this.wlorders[i].guid;
                    postData['items[' + i + '].wlinfocode'] = this.wlorders[i].code;
                }
                //累加海运子订单数据
                // let wlorders = this.wlorders;
                // this.wlSeaOrders.forEach(item => {
                //     wlorders = wlorders.concat(item.wlitems);
                //     item.wlitems.forEach(item2 => {
                //         amount += item2.amount;
                //     })
                // })
                // wlorders.forEach((item, i) => {
                //     postData['items[' + i + '].wlinfoid'] = item.guid;
                //     postData['items[' + i + '].wlinfocode'] = item.code;
                // })
                this.totalAmount = this.toFix2(amount);
                this.total = this.wlorders.length;
                postData['entity.amount'] = this.toFix2(amount);

                return postData;
            },
            toPay: function(type) {
                let that = this;
                layer.confirm('确定要进行支付申请？', {
                    btn: ['确定', '取消']
                }, function(){
                    that.doPay(type);
                });
            },
            doPay: function(type) {
                let loader = layui.layer.load();
                let postData = this.getFinalData();
                postData.type = type;
                this.$post('/wlinfo/Wlsettlement!save.action', qs.stringify(postData)).then(response => {
                    if (response.data.msg == "success") {
                        this.toast('操作成功');
                        this.$parent.switchPage('WlExpensesPay');
                    }  else {
                        this.toast('系统错误');
                    }
                    layer.close(loader);
                });
            },
            back: function () {
                this.$parent.switchPage('WlExpensesPay');
            }
        }
    }
</script>
